<template>
  <div class="article-edit">
    <div class="content-main container">
      <div class="content-wrapper">
        <el-card>
        <p class="data-title">视频相关数据</p>
        <ul class="datalist">
          <li v-for="(item,index) in datalist" :key="index">
            <p>{{item.name}}</p>
            <p>{{item.count}}</p>
            <p>昨天：{{item.yesterday}}</p>
          </li>
        </ul>
        </el-card> 
        <el-card>
        <p  class="data-title">数据趋势</p>
          <el-card class="card">
            <p  class="data-title">不同类型视频近7天播放量</p>
            <div class="chart_wrapper" id="video_sum"></div>
          </el-card>
          <el-card class="card">
            <p  class="data-title">周内粉丝变化量</p>
            <div class="chart_wrapper" id="video_time"></div>
          </el-card>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Data",
  data() {
    return {
      activeName: "0",
      datalist: [
        { name: "视频播放", count: 100, yesterday: 30 },
        { name: "评论数", count: 100, yesterday: 30 },
        { name: "弹幕数", count: 100, yesterday: 30 },
        { name: "点赞数", count: 100, yesterday: 30 },
        { name: "分享数", count: 100, yesterday: 30 },
        { name: "收藏数", count: 100, yesterday: 30 },
      ],
      tablist: [
        { tag: "搞笑", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { tag: "科幻", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { tag: "游戏", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { tag: "体育", data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { tag: "音乐", data: [820, 932, 901, 934, 1290, 1330, 1320] },
      ],
      x_data:[],
      y_data:[],
      x_time:[],
      y_time: []
    };
  },
  mounted() {
    this.getLine() //不同类型视频近7天播放量方法
    this.getTimeline() //周内粉丝变化量
  },
  methods: {
    getLine(){
      let option ={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [
            {
          name: '游戏',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '体育',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '生活日常',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '电影评价',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: '搞笑类',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
      ]}
      let myChart = this.$echarts.init(document.getElementById("video_sum"));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
    },
    getTimeline(){
      let option ={
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        title: [
          {
            left: 'center',
            text: '粉丝周内变化趋势'
          }
        ],
          tooltip: {
          trigger: 'axis'
        },
        series: [
          {
          data: [50, 65, 100, 110, 105, 100, 120],
          type: 'line',
          symbol: 'triangle',
          symbolSize: 20,
          lineStyle: {
            color: '#5470C6',
            width: 4,
            type: 'dashed'
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: '#EE6666',
            color: 'yellow'
        }
    }
        ],
      }
      let myChart = this.$echarts.init(document.getElementById("video_time"));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
    }
  },
};
</script>

<style lang="less" scoped>
.article-edit {
  padding: 40px 0;
  .data-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 40px;
  }
  .datalist {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    li {
      display: inline-block;
      width: 300px;
      height: 100px;
      background: rgb(242, 247, 251);
      border-radius: 4px;
      margin-bottom: 40px;
      color: #666;
      box-sizing: border-box;
      padding: 16px 20px;
      p:first-child {
        font-size: 14px;
        & + p {
          font-size: 24px;
          font-weight: bold;
          line-height: 32px;
          color: skyblue;
        }
      }
    }
  }
  .content-wrapper {
    padding: 60px 40px 40px 40px;
  }
  .chart_wrapper {
    width: 100%;
    height:300px;
  }
}
</style>